<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>贷款计算器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script th:src="@{/space/loanCalculater.js}"></script>
	<style>
	
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #bbccaa;
    font-size: 13px;
}
select{
    color:#f00;
}

#box {
    width: 750px;
    margin-left: 100px;
}
#box h1{
    float: left;
    position: absolute;
    top: 200px;
    left: 200px;
    line-height: 55px;
}
#box h2 {
    width: 50%;
    line-height:50px;
    font-size: 26px;
    color: #679a3f;
    text-align: center;
    border: 4px solid #679a3f;
    border-radius: 10px;
    margin-left: 25%;
    margin-bottom: 20px;
    margin-top: 50px;
}
.title {
    height: 30px;
}
.title li {
    float: left;
    border: #7b8560 solid 1px;
    border-bottom:none;
    border-radius: 4px 4px 0 0;
    margin-right:3px;
    box-shadow: 0px 0px 5px #ccc;
}
.title li a {
    display: block;
    padding: 0 12px;
    line-height: 30px;
    border-bottom: none;
    background-color: #679a3f;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px 4px 0 0;
}
#content{
    width: 743px;
    height:500px;
    border:1px solid #7b8560;
    border-top: none;
    float: left;
    background-color: #fff;
}
.title li .current {
    background-color: white;
    color: #000;
}
#content > div {
    display: none;
}
#content #contact {
    display: block;
}
#contact_left{
    float: left;
    margin-left: 40px;
    border-right: 1px solid #679a3f;
    padding-right: 25px;
}
#contact h5{
    line-height: 60px;
    padding-top: 2px;
    color: red;
    font-size: 14px;
}
#dklx input{
    margin-right: 10px;
    margin-bottom: 25px;
}
.percent{
    color: red;
}
#way{
    padding-left: 30px;
}
#way dd{
    padding-left: 20px;
    display: none;
}
#way dd input{
    width: 100px;
    margin:0 5px;
}
#way label{
    line-height:25px;
}
#dkll .percent{
    margin: 0 5px 0 46px;
    width: 50px;
    padding: 0 5px;
}
#dkll{
    margin-top: 25px;
    line-height: 30px;
}
#method{
    line-height: 35px;
}
.start{
    width: 75px;
    line-height: 26px;
    background-color: #dc9c30;
    border-radius: 5px;
    margin-left: 50px;
    margin-top: 15px;
    color: #fff;
}
.again{
    width: 75px;
    line-height: 26px;
    background-color: #dc9c30;
    border-radius: 5px;
    margin-left: 18px;
    margin-top: 15px;
    color: #fff;
}
#contact_right{
    float: right;
    margin-right:60px;
}
#contact_right p{
    line-height: 35px;
}
#contact_right input{
    margin-bottom: 10px;
}
/*表格*/
#list{
    width: 360px;
    line-height:30px;
    float: right;
    position: absolute;
    top: 50px;
    left: 900px;
}
#list h2{
    width: 50%;
    line-height:50px;
    font-size: 26px;
    color: #679a3f;
    text-align: center;
    border: 4px solid #679a3f;
    border-radius: 10px;
    margin-left: 25%;
    margin-bottom: 20px;
}
#list table{
    width: 100%;
    border-collapse: collapse;
}
#list table td{
    border:1px solid #000;
    padding: 0 10px;
}
#list tbody th{
    text-align: center;
    padding:0 10px ;
}
#list thead{
    font-weight: bold;
    width: 100%;
    border-bottom: 1px solid #000;
    text-align: left;
    font-size: 18px;
    line-height: 50px;
}

	</style>
</head>
<body>
<div id="box">
    <h2>贷款计算器</h2>
    <div id="tabs">
        <ul class="title">
            <li><a href="#" data-cid="contact" class="current">Wwang贷款计算器</a></li>
        </ul>
        <div id="content">
            <div id="contact">
                <form id="myform" action="#" style="display: block">
                    <div id="contact_left">
                        <div id="dklx">
                            <h5>请您填写相关贷款信息:</h5>
                            贷款类别:
                            <label><input type="radio" name="dktype" checked value="0"/>商业贷款</label>
                            <label><input type="radio" name="dktype" value="1"/>公积金贷款</label>
                            <label><input type="radio" name="dktype" value="2"/>组合型贷款</label>
                        </div>
                        <div id="jsfs">
                            <h6>计算方式:</h6>
                            <dl id="way">
                                <dt><label class="count"><input type="radio" name="jsfs" value="0"
                                                                checked/>根据面积、单价计算</label></dt>
                                <dd style="display: block">
                                    <label>单价:</label><input type="text" name="price">元/平米<br>
                                    <label>面积:</label><input type="text" name="area">平方米<br>
                                    <label>按揭成数</label>
                                    <select class="form-control" name="ajcs">
                                        <option value="70" selected>7成</option>
                                        <option value="80">8成</option>
                                        <option value="90">9成</option>
                                    </select>
                                </dd>
                                <dt><label><input type="radio" value="1" name="jsfs"/>根据贷款总额计算</label></dt>
                                <dd>
                                    <label>贷款总额：<input type="text" name="dkze">元</label>
                                </dd>
                            </dl>
                            <label>按揭年数</label>
                            <select class="form-control" name="ajns">
                                <option value="120" selected>10年（120期）</option>
                                <option value="240">20年（240期）</option>
                                <option value="360">30年（360期）</option>
                            </select><br>
                        </div>
                        <div id="dkll">
                            <label>贷款利率</label>
                            <select name="dkll">
                                <option value="0">2020年11月20日基准利率</option>
                            </select><br>
                            <input class="percent" name="dkll" type="text" value="4.90"/>%
                        </div>
                        <div id="method">
                            还款方式:
                            <label><input type="radio" name="bb" checked/>等额本息</label>
                            <label><input type="radio" name="bb"/>等额本金<br></label>
                        </div>
                        <input type="button" name="startCalc" class="start" value="开始计算"/>
                        <input type="reset" class="again" value="重新填写"/>
                    </div>
                    <div id="contact_right">
                        <h5>查看结果:</h5>
                        <label>房款总额:</label><input type="text" name="fousex" readonly/>元<br>
                        <label>贷款总额:</label><input type="text" name="loan" readonly/>元<br>
                        <label>还款总额:</label><input type="text" name="refund" readonly/>元<br>
                        <label>支付利息款:</label><input type="text" name="pay" readonly/>元<br>
                        <label>首期付款:</label><input type="text" name="first" readonly/>元<br>
                        <label>贷款月数:</label><input type="text" name="month" readonly/><br>
                        <label>月均还款:</label><input type="text" name="average" readonly/>元<br>
                        <p>注意: 以上结果仅供参考</p>
                        <img src="https://wwang-net.oss-cn-beijing.aliyuncs.com/bolg/wwang%E5%8D%9A%E5%AE%A2.png">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="list">
    <h2>贷款利率表</h2>
    <table>
        <thead>
        <tr>
            <th colspan="3">房贷利率</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th colspan="3">公积金利率（单位%）</th>
        </tr>
        <tr>
            <td>年限</td>
            <td>1-5年</td>
            <td>5-30年</td>
        </tr>
        <tr>
            <td>20年11月20日</td>
            <td>2.75</td>
            <td>3.25</td>
        </tr>

        <tr>
            <th colspan="3">商业贷款利率（单位%）</th>
        </tr>
        <tr>
            <td>年限</td>
            <td>1-5年</td>
            <td>5-30年</td>
        </tr>
        <tr>
            <td>20年11月20日</td>
            <td>4.75</td>
            <td>4.90</td>
        </tr>

        </tbody>
    </table>
</div>
</body>
</html>